<template>
  <div>
    <h2 style="text-align: center;">图书列表</h2>
    <el-row :gutter="20">
      <el-col :span="20" :offset="2">
        <!-- 添加/批量删除按钮 -->
        <div>
          <el-button type="danger" @click="batchDelBook" size="small">批量删除</el-button>
          <el-button type="primary" @click="toAddBook" size="small">添加图书</el-button>
        </div>
        <el-table
            :data="bookList"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
          <el-table-column
              type="selection">
          </el-table-column>
          <el-table-column
              prop="bookId"
              label="图书编号">
          </el-table-column>
          <el-table-column
              prop="bookName"
              label="图书名称">
          </el-table-column>
          <el-table-column
              prop="authorName"
              label="作者">
          </el-table-column>
          <el-table-column
              prop="price"
              label="价格">
          </el-table-column>
          <el-table-column
              label="分类">
            <template v-slot:default="props">
              {{props.row.category.categoryName}}
            </template>
          </el-table-column>
          <el-table-column
              prop="createTime"
              label="创建时间">
          </el-table-column>
          <el-table-column
              label="状态">
            <template v-slot:default="props">
              <el-tag type="danger" v-if="props.row.status===0">下架</el-tag>
              <el-tag v-if="props.row.status===1">上架</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
          >
            <template v-slot:default="props">
              <el-button type="primary" size="small" @click="toUpdateBook(props.row)" icon="el-icon-edit" circle></el-button>
              <el-button @click="delBook(props.row.bookId)" type="danger" size="small" icon="el-icon-delete" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row style="margin-top: 8px;text-align: center;">
          <el-pagination
              background
              :page-size="pageSize"
              prev-text="上一页"
              next-text="下一页"
              layout="prev, pager, next"
              :total="total"
              @next-click="getBookPage(pageNo+1,pageSize)"
              @prev-click="getBookPage(pageNo-1,pageSize)"
              @current-change="handleCurrentChange"
          >
          </el-pagination>
        </el-row>
      </el-col>
    </el-row>
    <BookAddOrUpdate :title="title" :book-form="book" @update-book="updateBook" @add-book="addBookHandler" :type="type" :category-list="categoryList" :flag="dialogTableVisible" @close-dialog="close"></BookAddOrUpdate>
  </div>
</template>
<script>
import axios from "axios"
import BookAddOrUpdate from "@/views/BookAddOrUpdate.vue"
  export default {
    data(){
      return{
        title:'',
        type:1,
        bookList:[],
        categoryList:[],
        bookIds:[],
        pageNo:1,
        pageSize:5,
        total:0,
        dialogTableVisible:false,
        book:{
          bookId:undefined,
          bookName:'',
          authorName:'',
          price:'',
          categoryId:'',
          createTime: '',
          status:'1'
        }
      }
    },
    components:{
      BookAddOrUpdate
    },
    mounted() {
      this.getBookPage(this.pageNo,this.pageSize);
      this.getCategoryList();
    },
    methods:{
      /* 跳转更新 */
      toUpdateBook(row){
        console.log("====",row)
        this.title="更新图书";
        this.type=2;
        this.dialogTableVisible=true;
        this.$nextTick(()=>{
          //更新回显
          this.book=row
        })
      },
      /* 弹出添加弹出层 */
      toAddBook(){
        this.title="添加图书";
        this.type=1;
        this.dialogTableVisible=true;
      },
      /* 关闭弹出层 */
      close(){
        this.dialogTableVisible=false
      },
      /* 更新图书数据提交 */
      updateBook(book){
        axios.post("http://127.0.0.1:8080/updateBook",JSON.stringify(book),{
          headers:{
            "Content-Type":'application/json'
          }
        }).then(resp=>{
          //console.log(resp)
          if(resp.data.code===0){
            //关闭弹出层
            this.dialogTableVisible=false
            //重新获取分页数据
            this.getBookPage(this.pageNo,this.pageSize)
          }else{
            this.$message.error(resp.data.msg)
          }
        })
      },
      /* 处理添加图书的事件函数 */
      addBookHandler(book){
        //AJAX
        axios.post("http://127.0.0.1:8080/addBook",JSON.stringify(book),{
          headers:{
            "Content-Type":'application/json'
          }
        }).then(resp=>{
          console.log(resp)
          if(resp.data.code===0){
            //关闭弹出层
            this.dialogTableVisible=false
            //重新获取分页数据
            this.getBookPage(this.pageNo,this.pageSize)
          }else{
            this.$message.error(resp.data.msg)
          }
        })
      },
      /* 获取分类列表 */
      getCategoryList(){
        axios.get("http://127.0.0.1:8080/getCategoryList").then(resp=>{
          this.categoryList = resp.data.data
        })
      },
      /* 表单重置 */
      resetForm(bookForm){
        //只能重置成book对象的数据
        this.$refs[bookForm].resetFields();
        //重置成原始状态
        this.book = this.$options.data().book
      },
      /* 批量删除 */
      batchDelBook(){
        if(this.bookIds && this.bookIds.length===0){
          this.$message({
            type: 'error',
            message: '请选择要删除的数据'
          });
        }else {
          this.$confirm('是否批量删除', '删除提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            type: 'warning'
          }).then(() => {
            //确定删除
            axios.post("http://127.0.0.1:8080/batchDeleteBook",JSON.stringify(this.bookIds),{
              headers: {
                'Content-Type': 'application/json'
              }
            }).then(resp=>{
              if(resp.data.code===0){
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
                this.getBookPage(this.pageNo,this.pageSize);
              }else {
                this.$message({
                  type: 'error',
                  message: resp.data.msg
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消'
            });
          });
        }
      },
      /* 多选事件处理 */
      handleSelectionChange(val){
        this.bookIds=[];//清空
        val.forEach(item=>{
          this.bookIds.push(item.bookId)
        })
      },
      /* 删除图书 */
      delBook(bookId){
        //跳出删除确认和取消按钮
        this.$confirm('是否删除', '删除提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          axios.get("http://127.0.0.1:8080/deleteBook",{
            params:{
              bookId:bookId
            }
          }).then(resp=>{
            console.log(resp.data.code==0)
            if(resp.data.code===0){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getBookPage(this.pageNo,this.pageSize)
            }else {
              this.$message({
                type: 'error',
                message: resp.data.msg
              });
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          });
        });
      },
      /* 处理当前页 */
      handleCurrentChange(current){
        this.pageNo = current;
        this.getBookPage(this.pageNo,this.pageSize)
      },
      /* 分页获取图书信息的函数 */
      getBookPage(pageNo, pageSize){
        this.pageNo = pageNo
        this.pageSize = pageSize
        axios.get("http://127.0.0.1:8080/getBooksPage",{
          params:{
            pageNo:this.pageNo,
            pageSize:this.pageSize
          }
        }).then(resp=>{
          // console.log("-->>>",resp)
          this.bookList = resp.data.data.page
          this.total = resp.data.data.total
        })
      }
    }
  }
</script>
<style scoped>

</style>
